<template>
  <div>
    <!-- 获取vuex共享数据的第一种方式 -->
    <!-- <h3>当前count的值:{{ $store.state.count }}</h3> -->
    <!-- 获取getters中的数据方式1:$store.getters.showNum -->
    <h3>{{ $store.getters.showNum }}</h3>
    <button @click="add">+1</button>
    <button @click="addN">+2</button>
    <button @click="asyncAdd">异步+1</button>
    <button @click="asyncAddN">异步+3</button>
  </div>
</template>

<script>
//{{ $store.state.count }} : vuex 共享数据方式1

export default {
  data() {
    return {};
  },
  methods: {
    add() {
      // 触发mutations事件的第一种方式
      this.$store.commit("add");
    },
    addN() {
      this.$store.commit("addN", 2);
    },

    asyncAdd() {
      // 触发 actions 的第一种方式 this.$store.dispatch('addAsync')
      this.$store.dispatch("addAsync");
    },

    asyncAddN() {
      this.$store.dispatch("addNAsyncN", 3);
    }
  }
};
</script>

<style lang="less" scoped></style>
